body {
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border-radius: 3px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    background: #4c4c4c;
    color: #fff;
    font-size: 12px;
    line-height: 100%;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.center {
    position: absolute;
    width: 212px;
    height: 212px;
    top: 87px;
    left: 87px;
    border-radius: 50%;
    background: #242424;
    border: 7px solid #3a3a3a;
    text-align: center;
}

.point {
    box-sizing: border-box;
    width: 186px;
    height: 186px;
    border-radius: 50%;
    border: 2px dotted #d3d3d3;
    position: absolute;
    top: 13px;
    left: 13px;
}

.spinner {
    width: 202px;
    height: 202px;
    position: absolute;
    top: 5px;
    left: 5px;

    circle {
        stroke: #f85b5b;
        stroke-width: 3;
        fill: none;
        stroke-dasharray: 625;
        animation: spinner 5s linear infinite;
        transform-origin: center center;
    }
}

@keyframes spinner {
    from {
        stroke-dashoffset: 625;
        transform: rotate(-90deg) scaleY(1);
    }

    50% {
        stroke-dashoffset: 0;
        transform: rotate(-90deg) scaleY(1);
    }

    50.001% {
        stroke-dashoffset: 0;
        transform: rotate(-90deg) scaleY(-1);
    }

    to {
        stroke-dashoffset: 625;
        transform: rotate(-90deg) scaleY(-1);
    }
}

.date {
    position: absolute;
    top: 68px;
    width: 100%;
}

.time {
    position: absolute;
    top: 80px;
    width: 100%;
    font-weight: 700;
    font-size: 40px;
    line-height: 100%;
    margin: 4px 0;
}

.beat {
    position: absolute;
    top: 129px;
    left: 57px;

    .heart {
        color: #f85b5b;
        font-size: 12px;
        float: left;
        margin-right: 4px;
        animation: beat 0.9s ease-in-out infinite;
    }
}

@keyframes beat {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.2);
    }
}

.energy {
    position: absolute;
    top: 129px;
    right: 55px;
    text-transform: uppercase;
}